<template>
    <el-container>

        <el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
            @close="handleClose">
            <el-sub-menu index="0">
                <template #title>
                    <el-icon>
                        <SoldOut />
                    </el-icon>
                    <span>系统管理</span>
                </template>
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon>
                            <location />
                        </el-icon>
                        <span>部门管理</span>
                    </template>
                    <el-menu-item index="1-1">销售部</el-menu-item>
                    <el-menu-item index="1-2">研发部</el-menu-item>
                    <el-menu-item index="1-3">协调部</el-menu-item>
                    <el-sub-menu index="1-4">
                        <template #title>财务部</template>
                        <el-menu-item index="1-4-1">出纳</el-menu-item>
                        <el-sub-menu index="1-4-2">
                            <template #title>会计</template>
                            <el-menu-item index="1-5-1">初级会计师</el-menu-item>
                            <el-menu-item index="1-5-2">中级会计师</el-menu-item>
                            <el-menu-item index="1-5-3">高级会计师</el-menu-item>
                            <el-menu-item index="1-5-4">注册会计师</el-menu-item>
                        </el-sub-menu>
                        <el-menu-item index="1-4-3">财务总监</el-menu-item>
                    </el-sub-menu>
                </el-sub-menu>
                <el-menu-item index="2">
                    <el-icon>
                        <icon-menu />
                    </el-icon>
                    <span>权限管理</span>
                </el-menu-item>
                <el-menu-item index="3">
                    <el-icon>
                        <document />
                    </el-icon>
                    <span>用户管理</span>
                </el-menu-item>
            </el-sub-menu>
            <el-menu-item index="4">
                <el-icon>
                    <setting />
                </el-icon>
                <span>学生管理</span>
            </el-menu-item>
        </el-menu>
        <el-container>
            <el-header>
                <span><center>学生信息管理系统</center></span>
                <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;margin-top: 10px;">
                    <el-radio-button :label="false">展开</el-radio-button>
                    <el-radio-button :label="true">收起</el-radio-button>
                </el-radio-group>
                <el-dropdown>
                    <el-icon style="margin-left: 1200px; margin-top:-45px;font-size: 20px;">
                        <setting />
                    </el-icon>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>个人中心</el-dropdown-item>
                            <el-dropdown-item>消息通知</el-dropdown-item>
                            <el-dropdown-item>问题反馈</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>

            </el-header>
            <el-main>Main</el-main>
            <el-footer type="flex" justify="center" align="middle"><div>联系我们 | 加入赞助 | 团队</div> </el-footer>
        </el-container>
    </el-container>
</template>
  
<script lang="ts" setup>
import { ref } from 'vue'
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
const isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.el-container {
    height: 100vh;
}

.el-menu {
    background: linear-gradient(to right, #00b7ff, #00ffff);
    border: 0!important;
}

.el-header {
    background-color: rgb(184, 208, 230);
    height: 15px;
    line-height: 15px;
}

.el-footer {
    background-color: #68b2cf;
}
</style>
